<template>
  <div class="addTicket">
    <div class="collapse">
      <h3 class="title">
        <span class="bt">*</span>
        巡检项目
      </h3>
      <div class="bg">
        <p class="ticket_title">转为工单</p>
        <div class="collapse_item">
          <van-form @failed="onFailed" @submit="onSubmit">
            <van-cell-group>
              <div class="custom_select_item">
                <van-field
                  required
                  is-link
                  readonly
                  v-model="exceptionType"
                  name="异常类型"
                  label="异常类型"
                  @click="showPickerExceptionType = true"
                  :rules="[{ required: true, message: '异常类型' }]"
                />
                <van-dropdown-menu class="custom_select">
                  <van-dropdown-item
                    @change="handleChange1"
                    v-model="form.exceptionType"
                    :options="exceptionOptions"
                  >
                  </van-dropdown-item>
                </van-dropdown-menu>
              </div>

              <van-field
                required
                v-model="form.item"
                type="text"
                maxlength="10"
                name="异常项目"
                label="异常项目"
                placeholder="异常项目"
                :rules="[{ required: true, message: '异常项目' }]"
              />

              <div class="custom_select_item">
                <van-field
                  required
                  is-link
                  readonly
                  v-model="dispatchUserName"
                  name="派工人员"
                  label="派工人员"
                  :rules="[{ required: false, message: '派工人员' }]"
                />
                <van-dropdown-menu class="custom_select">
                  <van-dropdown-item
                    @change="handleChange2"
                    v-model="form.dispatchUserId"
                    :options="personOptions"
                  >
                  </van-dropdown-item>
                </van-dropdown-menu>
              </div>

              <div class="custom_select_item">
                <van-field
                  required
                  is-link
                  readonly
                  v-model="urgencyLevel"
                  name="紧急程度"
                  label="紧急程度"
                  :rules="[{ required: false, message: '紧急程度' }]"
                  @click="showPickerExceptionType = true"
                />
                <van-dropdown-menu class="custom_select">
                  <van-dropdown-item
                    @change="handleChange3"
                    v-model="form.urgencyLevel"
                    :options="urgencyLevelOptions"
                  >
                  </van-dropdown-item>
                </van-dropdown-menu>
              </div>

              <div class="custom_select_item">
                <van-field
                  required
                  is-link
                  readonly
                  v-model="maintenanceType"
                  name="维修类型"
                  label="维修类型"
                  :rules="[{ required: true, message: '维修类型' }]"
                  @click="showPickerExceptionType = true"
                />
                <van-dropdown-menu class="custom_select">
                  <van-dropdown-item
                    @change="handleChange4"
                    v-model="form.maintenanceType"
                    :options="maintenanceTypeOptions"
                  >
                  </van-dropdown-item>
                </van-dropdown-menu>
              </div>

              <div>
                <p class="upload_img"><span class="bt">*</span> <span>处理时效</span></p>
                <div class="time_box">
                  期望
                  <div>
                    <van-button @click="handleMinus" icon="minus" plain size="small" />
                    <p class="val">{{ form.timeLimit }}</p>
                    <van-button @click="handlePlus" icon="plus" plain size="small" />
                  </div>

                  小时内
                </div>
              </div>
              <van-field
                v-model="form.remark"
                class="custom_textarea"
                type="textarea"
                name="情况描述"
                label="情况描述"
                placeholder="情况描述"
                :rules="[{ required: false, message: '情况描述' }]"
                rows="4"
                autosize
                maxlength="200"
                show-word-limit
              />
            </van-cell-group>
            <div class="btns">
              <van-button block type="primary" native-type="submit"> 提交 </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <van-overlay :show="showOverlay" class-name="loading_overlay">
      <van-loading class="loading" type="spinner" color="#1989fa" />
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { showNotify } from 'vant';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { addOrder } from '@/api/workOrder.js';
import { getUserAll } from '@/api/equipmentLedger.js';
import { maintenanceTypeOptions, urgencyLevelOptions } from '@/utils/options.js';
import { getDictOptions } from '@/utils/dic.js';
const activeNames = ref(['1']);
const showOverlay = ref(false);
const exceptionOptions = ref([]);
const personOptions = ref([]);
const form = reactive({
  exceptionType: [],
  item: '',
  dispatchUserId: '',
  timeLimit: '',
  maintenanceType: '',
  source: '',
  reporter: '',
  deviceId: route.params.deviceId,
  dispatchUserId: '',
  urgencyLevel: '',
  timeLimit: 0,
  remark: '',
  photoIdList: [1],
});

const exceptionType = ref('');
const dispatchUserName = ref('');
const urgencyLevel = ref([]);
const maintenanceType = ref('');
onMounted(async () => {
  const res1 = await getDictOptions('exceptionType');
  exceptionOptions.value = formatData(res1);
  await getPersons();
});
const getPersons = async () => {
  const res = await getUserAll();
  if (res.code == 200) {
    personOptions.value = formatData(res.data, 'name', 'id') || [];
  }
};
const formatData = (arr, key1 = 'name', key2 = 'code') => {
  const newArr = arr.map((v) => {
    return {
      ...v,
      text: v[key1],
      value: v[key2],
    };
  });
  return newArr;
};

const handleChange1 = (val) => {
  const res = exceptionOptions.value.find((v) => v.value == val);
  exceptionType.value = res.text;
};

const handleChange2 = (val) => {
  const res = personOptions.value.find((v) => v.value == val);
  dispatchUserName.value = res.text;
};
const handleChange3 = (val) => {
  const res = urgencyLevelOptions.find((v) => v.value == val);
  urgencyLevel.value = res.text;
};
const handleChange4 = (val) => {
  const res = maintenanceTypeOptions.find((v) => v.value == val);
  maintenanceType.value = res.text;
  console.log('form', form);
};

const onSubmit = () => {
  showOverlay.value = true;
  form.exceptionType =
    typeof form.exceptionType == 'string' ? [form.exceptionType] : form.exceptionType;
  addOrder(form)
    .then((res) => {
      if (res.code == 200) {
        showNotify({ type: 'success', message: '成功' });
        setTimeout(router.push({ path: '/pointInspection' }), 1000);
      }
    })
    .catch((err) => {
      console.log('err', err);
      showNotify({ type: 'warning', message: err.msg || '异常' });
    })
    .finally(() => {
      showOverlay.value = false;
    });
};
const onFailed = (errorInfo) => {
  console.log('failed', errorInfo);
};
const handleMinus = (errorInfo) => {
  if (form.timeLimit > 0) {
    form.timeLimit--;
  }
};
const handlePlus = (errorInfo) => {
  form.timeLimit++;
};
</script>

<style lang="scss" scoped>
.addTicket {
  padding: 24px 0;
  height: calc(100vh - 100px);
  overflow-y: auto;
  .ticket_title {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    color: #333333;
    line-height: 50px;
    height: 50px;
    background: linear-gradient(163deg, #d9eeff 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 10px 10px 0px 0px;
  }
  .btns {
    display: flex;
    justify-content: space-around;
    .van-button {
      width: 320px;
      height: 44px;
      border-radius: 6px 6px 6px 6px;
    }
  }
  .van-collapse-item__content {
    padding: 0;
  }
  .bg {
    background: url('@/assets/images/bg2.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
  }
  .collapse {
    margin-top: 24px;
  }
  .title {
    height: 24px;
    font-weight: bold;
    font-size: 15px;
    color: #333333;
  }

  .time_box {
    padding-left: 36px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 24px 0;
    margin-bottom: 48px;
  }
  .time_box > div {
    margin: 0 24px;
    width: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .custom_textarea {
    ::v-deep .van-field__value {
      padding: 10px 16px;
      background: #f8f8f8;
      border-radius: 2px 2px 2px 2px;
    }
  }
}
</style>
